<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="显示" id="show"/>
  <input type="button" value="隐藏" id="hide"/>
  <input type="button" value="切换" id="toggle"/> <br/><br/>
  <div id="div1"></div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //1.显示 show();
    //参数1:代表执行动画的时长 毫秒数,也可以是代表时长的字符串 fast normal  slow
    //参数2:代表动画执行完毕后的回调函数.
    $('#show').click(function () {
      //给id为div1的元素动画显示.
      //1.1 如果show()这个方法没有参数,那就没有动画效果.
      //$('#div1').show();
      //1.2 如果要想要动画效果,就应该给他参数.
      //$('#div1').show(2000);
      $('#div1').show('fast'); //200毫秒
      //$('#div1').show('normal'); //400毫秒
      //$('#div1').show('slow'); //600毫秒
      //$('#div1').show('penglin'); //如果代表时长的单词写错了,就相当于写了一个normal
      //1.3 回调函数.
      // $('#div1').show(2000, function () {
      //   alert('动画执行完毕了...');
      // })
    });


    //2.隐藏
    $('#hide').click(function () {
      //让id为div1的元素动画影藏.
      //$('#div1').hide();//没有参数没有动画效果.
      $('#div1').hide(2000);
      // $('#div1').hide(2000, function () {
      //   alert('隐藏了');
      // });
    });

    //3.切换 toggle
    //如果元素是隐藏状态就动画显示; 如果元素是显示状态就动画影藏.
    $('#toggle').click(function () {
      $('#div1').toggle(1000);
    });

  });
</script>